<template>
	<view>
		<!-- 渐变 -->
		<view class="lingr">
			<view class="userInfo">
				<view class="userImg">
					
				</view>
				<view class="logStrea">
					去登录
				</view>
			</view>
		</view> 
		
		<view class="detail-info-card">
			<view class="detail-list">
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>积分统计</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>我的二维码</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>我的名片</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>我的团队</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>我的收入</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>家宴商家申请</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
				<view class="list clrea-show">
					<view class="list-left">
							<uni-icons type="contact" size="30"></uni-icons>
						<text>加入会员</text>
					</view>
					<view class="list-right">
						<uni-icons type="right" color="#717171" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.lingr{
		width: 100%;
		height: 30vh;
		background-image: linear-gradient(to left bottom,#fffda6, #e1afc2,#fff1f4);
		position: relative;
		.userInfo{
			position: absolute;
			top: 60%;
			transform: translateY(-60%);
			left: 2%;
			display: flex;
			align-items: center;
			width: 100%;
			.userImg{
				width: 130rpx;
				height: 130rpx;
				border-radius: 100%;
				background-color: #FFFFFF;
			}
			.logStrea{
				color: #000000;
				font-weight: 600;
				font-size: 1.5rem;
				margin-left: 5%;
			}
		}
	}
	.detail-info-card{
		width: 94%;
		min-height: 0;
		padding: 10rpx;
		background-color: #FFFFFF;
		margin: 2% auto;
		border-radius: 35rpx;
		position: relative;
		transform: translateY(-40rpx);
		.detail-list{
			width: 100%;
			padding-left:18rpx;
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				box-shadow: 0  1rpx #d3d3d3;
				.list-left{
					color: #000000;
					display: flex;
					align-items: center;
					text{
						position: relative;
						left: 5%;
					}
				}
				.list-right{
					color: #000000;
					font-weight: 600;
				}
				.list-right-type{
					width: 60%;
					display: flex;
					flex-wrap: wrap;
					// justify-content:space-around;
					.list-type{
						width: 45%;
						margin: 1% 2.5%;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f9d7d9;
						font-weight: 600;
						border-radius: 30rpx;
					}
				}
			}
			.flex-wrap{
				display: flex;
				flex-wrap: wrap;
				.list-right{
					width: 100%;
					margin: 2% 0;
					.list-img{
						width: 30%;
						margin: 1.5% 0 0 3.3%;
						height: 200rpx;
						background-color: #007AFF;
						border-radius: 15rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.clrea-show{
				box-shadow: 0 0 0 #000000;
			}
		}
	}
</style>
